<template>
	<view class="emoji">
		<view class="emoji-line" v-for="(line,idx) in emoji" :key="idx">
			<view class="emoji-line-item" v-for="(item,index) in line" :key="index"
			@tap="clickEmoji(item)">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emoji: [
					['😀','😁','😂','🤣','😃','😄','😅','😆'],
					['😉','😊','😋','😎','😍','😘','😗','😙'],
					['😚','🙂','🤗','🤔','😐','😑','😶','🙄'],
					['😏','😣','😥','😮','🤐','😯','😪','😫'],
					['😴','😌','😛','😜','😝','🤤','😒','😓'],
					['😔','😕','🙃','🤑','😲','🙁','😖','😟'],
					['😤','😢','😭','😦','😧','😨','😩','😬'],
					['😬','😰','😱','😳','😵','😡','😠','😷'],
					['🤒','🤕','🤢','🤧','😇','🤠','🤥','🤓'],
					['','','','','','','','']
				]
			}
		},
		methods: {
			//获取发送表情
			clickEmoji(e){
				this.$emit('emotion',e)
			}
		}
	}
</script>

<style lang="scss">
.emoji{
	width: 100%;
	height: 460rpx;
	padding: 16rpx 10rpx 120rpx 10rpx;
	box-sizing: border-box;
	.emoji-line{
		display: flex;
		.emoji-line-item{
			flex: 1;
			text-align: center;
			line-height: 74rpx;
			font-size: 42rpx;
		}
	}
}
</style>
